import React, { useEffect } from "react";
import { Outlet, NavLink } from "react-router-dom";
import homecss from "@/assets/css/home.module.less";
import Search from "@/components/Search";
import loginImg from "@/assets/img/login.webp";
import { ChilRouters } from "@/router/index";
import { Button, Menu } from "antd";
import type { MenuProps } from "antd";

const render = (arr: any) => {
  let items: any = [];
  arr &&
    arr.forEach((item: any, index: any) => {
      items.push({
        key: index,
        icon: item.icon,
        label: <NavLink to={item.path}>{item.title}</NavLink>,
        children: item.children && render(item.children),
      });
    });
  return items;
};

function Home() {
  const onClick: MenuProps["onClick"] = (e) => {
    console.log("click ", e);
  };

  return (
    <div className={homecss.box}>
      <div className={homecss.header}>
        <div className={homecss.logo}>
          <img
            src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg"
            alt=""
          />
        </div>
        <div className={homecss.navTab}>
          <div className={homecss.tabItem1}>免费模版</div>
          <span className={homecss.hot}>
            <img src="https://lib.eqh5.com/eqx.layout/images/tiphot.svg" />
          </span>
          <div className={homecss.tabItem2}>开通会员</div>
          <span className={homecss.fenxian}>
            <img src="https://lib.eqh5.com/eqx.layout/images/vip_corner_2.png" />
          </span>
          <div className={homecss.tabItem3}>产品服务</div>
          <div className={homecss.tabItem4}>解决方案</div>
          <div className={homecss.tabItem5}>内容中台</div>
          <div className={homecss.tabItem6}>资源与合作</div>
        </div>
        <div className={homecss.seachbox}>
          <Search></Search>
        </div>
        <div className={homecss.login}>
          <Button type="primary" size="large">
            登录/注册
          </Button>
        </div>
      </div>
      <div className={homecss.loginimg}>
        <img src={loginImg} alt="" />
      </div>
      <div className={homecss.main}>
        {/* 左侧菜单栏 */}
        <div className={homecss.left}>
          <Menu
            onClick={onClick}
            theme="light"
            defaultSelectedKeys={["0"]}
            defaultOpenKeys={["0"]}
            mode="inline"
            items={render(ChilRouters)}
          />
        </div>
        <div className={homecss.right}>
          <Outlet></Outlet>
          <div style={{ width: "100%", height: "500px" }}></div>
        </div>
      </div>
    </div>
  );
}

export default Home;
